<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link href="../static/dist/semantic.min.css" th:href="@{/dist/semantic.min.css}" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/layui.css" th:href="@{/css/layui.css}">
    <link href="../static/css/index.css" th:href="@{/css/index.css}" rel="stylesheet">
    <link href="../static/css/public.css" th:href="@{/css/public.css}" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/notiflix.min.css" th:href="@{/css/notiflix.min.css}">
    <style>
        tbody span {
            color: #7e9a91;
        }

        .end {
            pointer-events: none;
        }

        .description {
            color: #9f3a38;
            display: inline-block;
            text-indent: 1.5em;
        }

        .ds-item {
            margin-top: 10px;
        }

        .remarks {

            width: 200px;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;
        }

    </style>
</head>
<nav class="ui inverted  attached  segment m-padded-tb-mini m-shadow-small">
    <div class="ui inverted secondary stackable menu" style="width: 93.7% !important;">
        <h2 class="ui teal header item" style="margin-left: 5.2%;font: italic 2em Georgia, serif;">Time-varying</h2>
        <a th:href="@{/index/none/main}" class="m-item  item m-mobile-hide"><i class="edit  icon"> </i>生产计划</a>
        <a href="javascript:void(0)" id="craft" class="m-item item m-mobile-hide craft"><i
                class="magic icon"> </i>工艺</a>
        <div class="right m-item m-mobile-hide menu">
            <div class="ui dropdown item">
                <div class="text">
                    <img class="ui avatar image" src="../static/image/test.jpg" th:src="@{/image/test.jpg}">
                    Hi~ <span id="real-name"></span>
                </div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <a href="#" th:href="@{/logout}" class="item">注销</a>
                </div>
            </div>
        </div>
    </div>
</nav>
<div class="m-padded-tb-big">
    <div class="ui container" style="float: left;width: 10em;">
        <div class="ui vertical menu m-container-mini" style="font-size: 1.2em;">
            <div class="item">
                <div class="header">员工</div>
                <div class="menu">
                    <a class="item left-item addUser" data-tooltip="添加用户" data-position="right center">添加新员工</a>
                    <a class="item left-item staff-management" data-tooltip="进入员工管理界面"
                       data-position="right center">员工管理</a>
                </div>
            </div>
            <div class="item">
                <div class="header">部门</div>
                <div class="menu">
                    <a class="item left-item addRole" data-tooltip="添加职位" data-position="right center">添加新的职位</a>
                    <a class="item left-item delete-role-info" data-tooltip="删除职位" data-position="right center">删除职位</a>
                    <a class="item left-item addDepartment" data-tooltip="添加部门" data-position="right center">添加新的部门</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="m-padded-lr">
    <div class="ui container m-container"
         style="width: 83.3%!important;float: right !important; margin-right: 1em !important;">
        <div class="ui attached hide" id="user">
            <div class="ui top attached">
                <div class="ui  horizontal link list">
                    <div class="item">
                        <div class="ui search">
                            <div class="ui left icon input">
                                <input class="prompt" type="text" id="search-text" placeholder="Search User Info"
                                       style="width: calc(20 * 14px)">
                                <i class="search icon"></i>
                                <div class="ui positive button search-user">Go</div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="field">
                            <label style="color: #0C0C0C">职位</label>
                            <div class="ui selection dropdown">
                                <input name="role" id="role-search" type="hidden">
                                <div class="default text" id="role-text">请选择职位</div>
                                <i class="dropdown icon"></i>
                                <div class="menu role-menu">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="field">
                            <label style="color: #0C0C0C">部门</label>
                            <div class="ui selection search dropdown">
                                <input name="department" id="department-search" type="hidden">
                                <div class="default text" id="department-text">请选择部门</div>
                                <i class="dropdown icon"></i>
                                <div class="menu department-menu">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <a id='reload-user' style="color: #0C0C0C"><i class='sync alternate icon'></i>刷新</a>
                    </div>
                </div>
                <div class="item" style="float: right">
                    <span id="total"></span>
                </div>
            </div>

            <div class="ui attached">
                <table class="ui striped  celled table">
                    <thead>
                    <tr>
                        <th><a href="javascript:void(0)" id="select_all" class="hide">全选</a></th>
                        <th>序号</th>
                        <th class="hide">Id</th>
                        <th>账号</th>
                        <th>创建时间</th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>职位</th>
                        <th>最后一次上线时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="ui piled segment" id="admin-description">
            <h4 class="ui header">管理员须知</h4>
            <p>
            <h5 class="ui header">1、权限</h5>
            <ul>
                <li class="ds-item">.ROLE_CRAFT</li>
                <span class="description">工艺部员工基础权限~ 注：添加工艺部新职位必须添加此基础权限</span>

                <li class="ds-item">.ROLE_PLAN</li>
                <span class="description">计划部员工基础权限~ 注：添加计划部新职位必须添加此基础权限</span>

                <li class="ds-item">.ROLE_QUALITY</li>
                <span class="description">质量部员工基础权限~ 注：添加质量部新职位必须添加此基础权限</span>

                <li class="ds-item">.ROLE_PRODUCE</li>
                <span class="description">生产部员工基础权限~ 注：添加生产部新职位必须添加此基础权限</span>

                <li class="ds-item">.ROLE_ADMIN</li>
                <span class="description">管理员权限~ 最高权限</span>

                <li class="ds-item">.ROLE_CRAFT_DIRECTOR</li>
                <span class="description">工艺部主管~ 工艺部最高权限，主管权限组成示例 [ROLE_CRAFT,ROLE_CRAFT_DIRECTOR]</span>

                <li class="ds-item">.ROLE_PRODUCE_DIRECTOR</li>
                <span class="description">生产部主管~ 生产部最高权限，主管权限组成示例 [ROLE_PRODUCE,ROLE_PRODUCE_DIRECTOR]</span>

                <li class="ds-item">.ROLE_PROCESS_ENGINEER</li>
                <span class="description">工艺工程师~ 仅次于工艺主管职位，权限组成示例[ROLE_CRAFT,ROLE_PROCESS_ENGINEER]</span>

                <li class="ds-item">.ROLE_QUALITY_ENGINEER</li>
                <span class="description">质量工程师~ 暂为质量部最高权限，权限组成示例[ROLE_QUALITY,ROLE_QUALITY_ENGINEER]</span>

                <li class="ds-item">.ROLE_SUPERVISOR</li>
                <span class="description">生产线长~ 仅次于生产主管,权限组成示例[ROLE_PRODUCE,ROLE_SUPERVISOR]</span>

                <li class="ds-item">.ROLE_OTHER</li>
                <span class="description">其他权限~ 用于财务，仓储部门,权限组成示例[ROLE_OTHER]</span>

            </ul>
            </p>
            <p>
            <h5 class="ui header">2、职位</h5>
            <span class="description">
                    员工与职位关系为多对一，只能删除未被使用的职位。
                </span>
            </p>
            <p>
            <h5 class="ui header">3、员工添加</h5>
            <span class="description">
                    username：对应其工号、 密码系统默认123456。职位和部门须匹配
                </span>
            </p>
            <p>
            <h5 class="ui header">4、员工管理</h5>
            <span class="description">
                    可修改员工账号，姓名，部门，职位。也可通过职位和部门查询员工信息，搜索框可通过用户名，姓名查询员工信息，可删除员工。
                    注：！！！ 状态 0：正常 - - 状态1：禁用
                </span>
            </p>
        </div>

        <!--用户添加modal-->
        <div class="ui modal user">
            <div class="header">添加新员工</div>
            <i class="close icon"></i>
            <form class="ui form segment" id="user-form" onsubmit="return false" autocomplete="off">
                <div class="two fields">
                    <div class="field">
                        <label>姓名</label>
                        <input placeholder="First Name" name="name" id="name" type="text">
                    </div>
                    <div class="field">
                        <label>职位</label>
                        <div class="ui selection dropdown">
                            <input name="role" id="role" type="hidden">
                            <div class="default text">请分配职位</div>
                            <i class="dropdown icon"></i>
                            <div class="menu role-menu">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="three fields">
                    <div class="field">
                        <label>账号</label>
                        <input placeholder="Username" name="username" id="username" type="text">
                    </div>
                    <div class="field">
                        <label>部门</label>
                        <div class="ui selection search dropdown">
                            <input name="department" id="department" type="hidden">
                            <div class="default text">计划部</div>
                            <i class="dropdown icon"></i>
                            <div class="menu department-menu">
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <label>邮箱</label>
                        <input type="text" id="email" name="email" placeholder="请输入foxmail邮箱">
                    </div>
                </div>
                <div class="ui user reset button">重置</div>
                <div style="float: right;">
                    <div class="ui positive submit button" id="addUser-btn">提交</div>
                </div>
            </form>
        </div>
        <!--        添加职位-->
        <div class="ui modal role">
            <div class="header">添加新的职位</div>
            <i class="close icon"></i>
            <form class="ui form segment" id="role-form" onsubmit="return false" autocomplete="off">
                <div class="field">
                    <label>职位名称</label>
                    <input type="text" id="position" name="position" placeholder="请输入职位名称">
                </div>
                <div class="field">
                    <label>部门</label>
                    <div class="ui selection search dropdown">
                        <input name="position-department" id="position-department" type="hidden">
                        <div class="default text">计划部</div>
                        <i class="dropdown icon"></i>
                        <div class="menu department-menu-role">
                        </div>
                    </div>
                </div>
                <div class="field disabled" id="permission-select">
                    <label>请选择权限</label>
                    <div class="ui selection multiple search dropdown">
                        <input name="permission" id="permission" type="hidden">
                        <div class="default text">请选择权限</div>
                        <i class="dropdown icon"></i>
                        <div class="menu permission-menu" id="permission-menu">
                        </div>
                    </div>
                </div>
                <div class="ui role reset button">重置</div>
                <div style="float: right;">
                    <div class="ui positive submit button" id="addRole-btn">提交</div>
                </div>
            </form>
        </div>
        <!--       删除职位 -->
        <div class="ui modal delete-role-modal">
            <div class="header">删除职位</div>
            <i class="close icon"></i>
            <form class="ui form segment" id="delete-role-form" autocomplete="off" onsubmit="return false">
                <div class="field">
                    <label>职位名称</label>
                    <div class="ui selection dropdown">
                        <input name="delete-role" id="delete-role-info" type="hidden">
                        <div class="default text">请选择要删除的职位</div>
                        <i class="dropdown icon"></i>
                        <div class="menu delete-role-menu">
                        </div>
                    </div>
                </div>
                <div class="ui del-role reset button">取消</div>
                <div style="float: right;">
                    <div class="ui positive submit button" id="deleteRole-btn">确定删除</div>
                </div>
            </form>
        </div>
        <!--        添加新部门-->
        <div class="ui modal department">
            <div class="header">添加新部门</div>
            <i class="close icon"></i>
            <form class="ui form segment" id="department-form" autocomplete="off" onsubmit="return false">
                <div class="field">
                    <label>部门名称</label>
                    <input type="text" name="newDepartment" id="newDepartment" placeholder="请输入部门名称">
                </div>
                <div class="ui department reset button">重置</div>
                <div style="float: right;">
                    <div class="ui positive submit button" id="addDepartment-btn">提交</div>
                </div>
            </form>
        </div>
    </div>
</div>


<!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>-->
<script src="../static/dist/semantic.min.js" th:src="@{/dist/semantic.min.js}"></script>
<script src="../static/js/init.js" th:src="@{/js/init.js}"></script>
<script src="../static/js/laydate.min.js" th:src="@{/js/laydate.min.js}"></script>
<script src="../static/js/layui.js" th:src="@{/js/layui.js}"></script>
<script src="../static/js/notiflix.min.js" th:src="@{/js/notiflix.min.js}"></script>
<script src="../static/js/notiflix-aio.min.js" th:src="@{/js/notiflix-aio.min.js}"></script>
<script src="../static/js/public.js" th:src="@{/js/public.js}"></script>
<script src="../static/js/admin.js" th:src="@{/js/admin.js}"></script>
<body>



</body>
</html>